<template>
  <div class="productsmam">
    <a-card title="产品管理">
      <div class="search_box">
        <div>
          <a-input v-model="form.tbid" style="width:300px" placeholder="请输入淘宝产品ID" />
          <a-range-picker
            :ranges="{ '今天': [moment(), moment()], '本月': [moment(), moment().endOf('month')] }"
            show-time
            format="YYYY/MM/DD HH:mm:ss"
            @change="onChange" />
          <a-select v-model="form.class" style="width: 120px" v-show="tabs=='1'" @change="selectchange">
            <a-select-option value="1">
              所有
            </a-select-option>
            <a-select-option value="2">
              充值
            </a-select-option>
            <a-select-option value="3">
              服务费
            </a-select-option>
          </a-select>
          <a-button>查询 </a-button>
          <a-button>重 置 </a-button>
        </div>
        <div class="btns">
          <a-button icon="upload" style="background: #2db7f5;color: white;">
            导出
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :row-key="record => record.id"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange">
        <template slot="title" slot-scope="record">
          <a :href="record.auctionUrl" target="_blank" rel="noopener noreferrer">{{ record.title }}</a>
        </template>
        <template slot="changeType" slot-scope="record">
          <span v-if="record.changeType==1" style="background-color:blue;color:white;padding:2px 5px;">服务费</span>
          <span v-else style="background-color:green;color:white;padding:2px 5px;">充值</span>
        </template>
        <template slot="couponLeftCount" slot-scope="record"> {{ record.couponLeftCount }}/{{ record.couponTotalCount }}
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'Productsmam',
    data () {
      return {
        dateFormat: 'YYYY/MM/DD',
        monthFormat: 'YYYY/MM',
        tabs: '1',
        form: {
          tbid: '',
          class: '1'
        },
        columns: [{
            title: '团队',
            dataIndex: 'username',
            sorter: true,
            // width: '20%',
            scopedSlots: {
              customRender: 'username'
            }
          },
          {
            title: '类型',
            // dataIndex: 'changeType',
            // width: '20%',
            scopedSlots: {
              customRender: 'changeType'
            }
          },
          {
            title: '变动前金额',
            dataIndex: 'beforeCount',
            // width: '20%',
            scopedSlots: {
              customRender: 'beforeCount'
            }
          },
          {
            title: '变动金额',
            dataIndex: 'changeCount',
            // width: '20%',
            scopedSlots: {
              customRender: 'changeCount'
            }
          },
          {
            title: '变动后金额',
            dataIndex: 'afterCount',
            // width: '20%',
            scopedSlots: {
              customRender: 'afterCount'
            }
          },
          {
            title: '产品ID',
            dataIndex: 'itemId',
            // width: '20%',
            scopedSlots: {
              customRender: 'itemId'
            }
          },
          {
            title: '产品名称',
            // dataIndex: 'title',
            // width: '20%',
            scopedSlots: {
              customRender: 'title'
            }
          },
          {
            title: '发布时间',
            dataIndex: 'publishTime',
            // width: '20%',
            scopedSlots: {
              customRender: 'publishTime'
            }
          },
          {
            title: '结束时间',
            dataIndex: 'activityEndTime',
            // width: '20%',
            scopedSlots: {
              customRender: 'activityEndTime'
            }
          },
          {
            title: '服务费比率',
            dataIndex: 'serviceRate',
            // width: '20%',
            scopedSlots: {
              customRender: 'serviceRate'
            }
          },
          {
            title: '支付金额',
            dataIndex: 'transAmount',
            // width: '20%',
            scopedSlots: {
              customRender: 'transAmount'
            }
          },
          {
            title: '总服务费',
            dataIndex: 'totalFee',
            // width: '20%',
            scopedSlots: {
              customRender: 'totalFee'
            }
          },
          {
            title: '服务费分成',
            dataIndex: 'fee',
            // width: '20%',
            scopedSlots: {
              customRender: 'fee'
            }
          },
          {
            title: '服务费备注',
            dataIndex: 'remarksUser',
            // width: '20%',
            scopedSlots: {
              customRender: 'remarksUser'
            }
          },
          {
            title: '变动时间',
            dataIndex: 'createTime',
            // width: '20%',
            scopedSlots: {
              customRender: 'createTime'
            }
          }

          // {
          //   title: '操作',
          //   // dataIndex: 'active',
          //   // width: '20%',
          //   scopedSlots: {
          //     customRender: 'active'
          //   }
          // },

        ],
        selectedRowKeys: [], // Check here to configure the default column
        data: [{
          activityEndTime: '2020-08-05',
          afterCount: 3202.41,
          auctionUrl: 'https://detail.tmall.com/item.htm?id=621233715239',
          beforeCount: 3231.43,
          businessId: null,
          businessType: null,
          changeCount: 29.02,
          changeType: 1,
          couponZkFinalPrice: 11.9,
          createTime: '2020-08-19 15:51:15',
          fee: 29.02,
          id: 8842,
          itemId: 621233715239,
          publishTime: '2020-08-04',
          remarksUser: '',
          serviceRate: 8,
          title: '青花椒油260ml 特麻 四川特产 重庆江津九叶麻椒油藤椒油调味油',
          totalFee: 64.49,
          transAmount: 806.1,
          updateTime: null,
          userId: 13,
          username: '乐推'
        }],
        pagination: {},
        loading: false
      }
    },

    computed: {

    },
    created () {

    },
    mounted () {

    },
    methods: {
      moment,
      onSelectChange (selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
      },
      handleTableChange (pagination, filters, sorter) {
        console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters
        })
      },
      fetch (params = {}) {
        console.log('params:', params)
        this.loading = true
        // some axaj
      },
      onChange (dates, dateStrings) {
        console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      },
      callback () {
        console.log(this.tabs)
      },
      selectchange () {
        console.log(this.form.class)
      }
    }
  }
</script>

<style lang='less' scoped>
  .productsmam {
    width: 100%;

    .search_box {
      display: flex;
      justify-content: space-between;
    }

    .btns {
      padding: 8px 0;
      float: right;
    }
  }
</style>
